<template>
  <div class="swiperClass">
    <div class="removeSizePrev" slot="button-prev">
      <div class="removeIconSize">
        <i class="el-icon-caret-left"></i>
      </div>
    </div>
    <div class="swiperDisplay">
      <swiper class="swiper" ref="swiper" :options="swiperOption">
        <!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
        <swiper-slide
          v-for="(item, index) in topMenus"
          :key="index"
          class="swiperSlide"
        >
          <div
            :class="activeMenu == item.path ? 'swiperCallFcous' : 'swiperCall'"
            @click="handleSelect(item, index)"
          >
            <!-- <div class="menuIcon">
              <svg-icon :icon-class="item.meta.icon" />
            </div> -->
            <div class="menuSize">{{ item.meta.title }}</div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="removeSizeNext" slot="button-next">
      <div class="removeIconSize"><i class="el-icon-caret-right"></i></div>
    </div>
  </div>
</template>

<script>
import { constantRoutes } from "@/router";
import {
  ROLETYPE,
} from "@/utils/variable";

// 隐藏侧边栏路由
const hideList = ["/index", "/user/profile"];

export default {
  data() {
    return {
      selectNum: 0,
      //swiper选项
      swiperOption: {
        slidesPerView: 7,
        spaceBetween: 0,
        direction: "horizontal",
        navigation: {
          nextEl: ".removeSizeNext",
          prevEl: ".removeSizePrev",
        },

        //   on: {
        //     resize: () => {
        //       this.$refs.swiper.$swiper.changeDirection(
        //         window.innerWidth <= 960
        //           ? 'vertical'
        //           : 'horizontal'
        //       )
        //     }
        //   }
      },
      // 顶部栏初始数
      // 当前激活菜单的 index
    };
  },
  computed: {
    theme() {
      return this.$store.state.settings.theme;
    },
    // 顶部显示菜单
    topMenus() {
      let topMenus = [];

      this.routers.map((menu) => {
        console.log(menu)
        if (menu.hidden !== true) {
          // 兼容顶部栏一级菜单内部跳转
          if (menu.path === "") {
            topMenus.push(menu.children[0]);
          } else {
            topMenus.push(menu);
          }
        }
      });
      if (this.$store.state.user.oucode.length === 6 && (this.$store.state.user.roles == ROLETYPE[1] ||
        this.$store.state.user.roles == ROLETYPE[2])) {
          topMenus.forEach((item) => {
            if (item.path === "/personnelInvolved" || item.path === "http://172.21.127.3/yzs/bigscreen-yz/page/illegalfund/illegalfund") {
              topMenus.splice(topMenus.indexOf(item), 1)
            }
          })
      }
      return topMenus;
    },
    // 所有的路由信息
    //返回的顶部导航栏中的首页不是又后端提供的，是前端定的const路由
    routers() {
      return this.$store.state.permission.topbarRouters;
    },
    // 设置子路由
    childrenMenus() {
      var childrenMenus = [];

      this.routers.map((router) => {
        for (var item in router.children) {
          if (router.children[item].parentPath === undefined) {
            if (router.path === "/") {
              router.children[item].path = "/" + router.children[item].path;
            } else {
              if (!this.ishttp(router.children[item].path)) {
                router.children[item].path =
                  router.path + "/" + router.children[item].path;
              }
            }
            router.children[item].parentPath = router.path;
          }
          childrenMenus.push(router.children[item]);
        }
      });

      return constantRoutes.concat(childrenMenus);
    },
    // 默认激活的菜单
    activeMenu() {
      const path = this.$route.path;

      let activePath = path;
      if (
        path !== undefined &&
        path.lastIndexOf("/") > 0 &&
        hideList.indexOf(path) === -1
      ) {
        const tmpPath = path.substring(1, path.length);

        activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));

        this.$store.dispatch("app/toggleSideBarHide", false);
      } else if (!this.$route.children) {
        activePath = path;
        this.$store.dispatch("app/toggleSideBarHide", true);
      }
      this.activeRoutes(activePath);

      return activePath;
    },
  },
  beforeMount() {
    window.addEventListener("resize", this.setVisibleNumber);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.setVisibleNumber);
  },
  mounted() {
    this.setVisibleNumber();
  },
  methods: {
    // 根据宽度计算设置显示栏数
    setVisibleNumber() {
      const width = document.body.getBoundingClientRect().width / 3;
      this.visibleNumber = parseInt(width / 85);
    },
    // 菜单选择事件
    //item.path == "/index"时关闭左菜单
    handleSelect(item, index) {
      //如果是大屏禁止跳转
      if (item.children) {
        this.$router.push({ path: item.children[0].path });
      }
      // this.$router.push({ path: item.path });
      const route = this.routers.find((el) => el.path === item.path);
      if (this.ishttp(item.path)) {
        // http(s):// 路径新窗口打开
        console.log(item.path);
        window.open(item.path, '_blank', 'noreferrer')
        // window.location.href = item.path;
      } else if (!route || !route.children) {
        // 没有子路由路径内部打开
        this.$router.push({ path: item.path });
        this.$store.dispatch("app/toggleSideBarHide", true);
      } else {
        // 显示左侧联动菜单
        this.activeRoutes(item.path);
        this.$store.dispatch("app/toggleSideBarHide", false);
      }
    },
    // 当前激活的路由
    activeRoutes(key) {
      if (key == "/index") {
        this.$store.dispatch("app/toggleSideBarHide", true);
      }
      var routes = [];
      if (this.childrenMenus && this.childrenMenus.length > 0) {
        this.childrenMenus.map((item) => {
          if (key == item.parentPath || (key == "index" && "" == item.path)) {
            routes.push(item);
          }
        });
      }

      if (routes.length > 0) {
        this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
      }
    },
    ishttp(url) {
      return url.indexOf("http://") !== -1 || url.indexOf("https://") !== -1;
    },
  },
};
</script>

<style lang="scss">
@import "../../assets/styles/variables.scss";
.topmenu-container.el-menu--horizontal > .el-menu-item {
  float: left;
  height: 50px !important;
  line-height: 47px !important;
  color: #999093 !important;
  padding: 0 5px !important;
  margin: 0 10px !important;
}

.topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #{"var(--theme)"} !important;
  color: #303133;
}

/* submenu item */
.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
  float: left;
  height: 50px !important;
  line-height: 50px !important;
  color: #999093 !important;
  padding: 0 5px !important;
  margin: 0 10px !important;
}
.removeSizePrev {
  width: 13px;
  height: 50px;
  margin-top: 8px;
  margin-right: 10px;
  background: rgba(255, 255, 255, 1);
  opacity: 0.3;
  z-index: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none !important;
}
.removeSizeNext {
  width: 13px;
  height: 50px;
  margin-top: 8px;
  margin-left: 20px;
  background: rgba(255, 255, 255, 1);
  opacity: 0.3;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none !important;
}
.swiper-button-disabled {
  opacity: 0.15;
}
.removeIconSize {
  font-size: 15px;
  color: black;
  z-index: 11;
  opacity: 10;
}
.swiperClass {
  height: 100%;
}
.swiperCall {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  background-color: transparent;
}
.swiperCallFcous {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: $top-menu-focus-font-color;
  background-color: $top-menu-focus;
}
.swiperCall:hover {
  // background-color: $headerbgfocus-color !important;
  // opacity: 0.8;
}
.returnSize {
  font-size: 20px;
  font-family: DengXian;
  margin-left: 5px;
  color: white;
  cursor: pointer;
}
.menuIcon {
  margin-bottom: 3px;
  font-size: 18px;
  font-family: DengXian;
  // color: white;
}
.menuSize {
  margin-left: 5px;
  font-size: $top-menu-focus-font-size;
  font-family: $font-family;
  font-weight: $top-menu-font-weight;
}
.swiper {
  height: 100%;
  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: white;
    // background-color: white;
  }
}
.iconSize {
  margin-right: 10px;
  font-size: 20px;
  color: rgba(255, 255, 255, 1);
  opacity: 0.5;
  cursor: pointer;
}
.swiperSlide {
  width: 12.4% !important;
}
.swiperDisplay {
  width: 100%;
}
</style>
